<template>
  <el-form :model="form" label-width="130px" :rules="rules" ref="form" style="margin-top: -12px">
    <el-form-item label="供应链/库存" class="one-label">
      <el-form-item label="规格类型：" label-width="170px">
        <el-radio-group v-model="form.skuFlag" :disabled="disableStock" @change="sendSkuFlg">
          <template v-for="(val, key) in dict.skuFlag">
            <el-radio :label="key" :key="key">{{ val }}</el-radio>
          </template>
        </el-radio-group>
      </el-form-item>
      <template v-if="form.skuFlag == '0'">
        <el-form-item label="商品库存：" label-width="170px" prop="stock">
          <el-input v-model="form.stock" class="long-input-2" :disabled="disableStock  || form.crossBorderType === '2'">
          </el-input>
        </el-form-item>
      </template>
    </el-form-item>
  </el-form>
</template>


<script>
  import {
    getBySupplierId
  } from '@/api/user/supplier-config'
  export default {
    props: {
      dict: {
        type: Object
      },
      supplierGoodsId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        form: {
          goodsId: '',
          supplierGoodsId: '',
          skuFlag: '0',
          stock: '0',
          // 跨境类型：1-普通商品，2-跨境保税
          crossBorderType: '1'
        },
        // 供应商系统配置
        supplierConfig: {
          wholesaleAuthority: 0
        },
        flagBoolean: false,
        skuFlag: 0,
        disableStock: false,
        rules: {
          unrealSalesNum: [{
            max: 8,
            message: '已经出售库存最多8个字节'
          },
          {
            required: false
          },
          {
            pattern: /^[0-9]*[0-9][0-9]*$/,
            message: '请正确输入已经出售库存'
          }
          ],
          stock: [{
            max: 8,
            message: '库存最多8个字节'
          },
          {
            required: true,
            message: '请填写商品库存',
            trigger: 'blur'
          },
          {
            pattern: /^[0-9]*[0-9]*$/,
            message: '请填写正确商品库存'
          }
          ],
          stockWarn: [{
            max: 8,
            message: '库存最多8个字节'
          },
          {
            required: false
          },
          {
            pattern: /^[0-9]*[1-9][0-9]*$/,
            message: '请填写正确库存预警'
          }
          ]
        }
      }
    },
    // 初始化页面
    created() {
      this.initEnterpriseConfig()
      this.initGoodsEdit()
    },
    mounted() {
      const that = this
      that.$bus.$on('crossBorderType', function(flag) {
        that.form.crossBorderType = flag
      })
    },
    beforeDestroy() {
      this.$bus.$off('goods.edit.data')
    },
    methods: {
      sendSkuFlg() {
        this.$bus.$emit('skuFlag', this.form.skuFlag)
      },
      // 初始化企业系统配置
      initEnterpriseConfig() {
        getBySupplierId(this.getSupplierId()).then(response => {
          if (response.isError) return
          this.supplierConfig = response.data
          if (this.supplierConfig.warehouseAuthority === 1 && this.supplierConfig.warehouseDeliverFlag === 1) {
            if (!this.form.goodsId) {
              // 新增商品时，允许编辑
              return
            }
            // 开启仓库库存，不允许编辑
            this.disableStock = true
            this.form.stock = '0'
          }
        })
      },
      initGoodsEdit() {
        const that = this
        this.$bus.$on('goods.edit.data', function(data) {
          if (data.supplierGoodsId && data.skuFlag * 1 === 1) {
            // 单规格可以改为多规格，反之则不行
            that.flagBoolean = true
          }
          const skuFlag = that.$utils.isExist(data.skuFlag) ? data.skuFlag + '' : '0'
          that.form.skuFlag = skuFlag
          that.form.stock = that.$utils.isExist(data.stock) ? data.stock + '' : ''
          that.form.goodsId = that.$utils.isExist(data.goodsId) ? data.goodsId.toString() : ''
          that.form.supplierGoodsId = that.$utils.isExist(data.supplierGoodsId) ? data.supplierGoodsId.toString()
            : ''
          // 审核通过后就不能再编辑库存
          that.disableStock = !!that.form.goodsId
          that.form.crossBorderType = that.$utils.isExist(data.crossBorderType)
            ? data.crossBorderType + ''
            : '1'
          if (that.form.crossBorderType === '2') {
            that.disableStock = true
          }
          that.$bus.$emit('goods_supplier.disableStock', that.disableStock)
        })
      },
      checkForm() {
        // 需要校验的集合
        const checkArrays = []
        const skuFlag = this.form.skuFlag
        if (skuFlag === '0') {
          checkArrays.push('stock')
        }
        let ret = true
        let message = ''
        this.$refs.form.validateField(checkArrays, (valid) => {
          if (valid !== '') {
            message = valid
            ret = false
            return
          }
        })
        if (!ret) {
          this.$message({
            type: 'error',
            message: message
          })
          return false
        }

        this.$refs['form'].validate((valid) => {
          if (valid) {
            ret = true
          }
        })
        return ret
      }
    }
  }
</script>
<style lang="less" scoped>
  .span-bar {
    padding: 0 50px;
  }

  .remove-btn {
    padding: 7px 6px !important;
  }

  .long-input {
    width: 80%;
  }

  .long-input-2 {
    width: 55%;
    margin-right: 5%;
  }

  .long-input-3 {
    width: 55%;
  }

  .short-input {
    width: 20%;
  }

  .short-input-2 {
    width: 25%;
  }

  .default-input {
    width: 50%;
  }

  .tips {
    color: gray;
    font-size: 12px;
    line-height: 1.2;
    padding-top: 5px;
  }

  .picture {
    width: 130px;
    height: 130px;
    display: block;
  }

  .pic-bar {
    position: relative;

    .close-icon {
      position: absolute;
      right: -30px;
      top: -11px;
      width: 31px;
      height: 40px;
      padding: 0 7px;
      cursor: pointer;
    }

    span {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
      display: block;
      color: #fff;
      text-align: center;
      padding: 3px 0;
      background: rgba(0, 0, 0, 0.5);
      cursor: pointer;
    }
  }

  .pic-add {
    background: #fff;
    border: #d3d3d3 1px dashed;
    border-radius: 5px;
    padding: 0 45px;
  }
</style>
